//联赛福利
.welfare {
    padding-top: .01rem;

    .welfareTab {
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        margin-top: -.85rem;

        &::before {
            content: '';
            position: absolute;
            top: 0;
            left: 50%;
            transform: translate(-50%, 0);
            width: .39rem;
            height: .67rem;
            background: url(../img/welfare/tab3.png)center center no-repeat;
            background-size: 100% 100%;
        }

        li {
            width: 2.89rem;
            height: .75rem;
            cursor: pointer;
            user-select: none;
            background: url(../img/welfare/tab1.png)top center no-repeat;
            background-size: 100% 100%;
            margin: 0 .10rem;

            &.active {
                background: url(../img/welfare/tab1_a.png)top center no-repeat;
                background-size: 100% 100%;
            }
        }

        li:nth-child(2) {
            background: url(../img/welfare/tab2.png)top center no-repeat;
            background-size: 100% 100%;

            &.active {
                background: url(../img/welfare/tab2_a.png)top center no-repeat;
                background-size: 100% 100%;
            }
        }
    }

    .pool {
        width: 6.9rem;
        height: 11.54rem;
        background: url(../img/welfare/pool-m.png)top center no-repeat;
        background-size: 100% 100%;
        margin: .40rem auto 0;
        display: flex;
        flex-direction: column;
        align-items: center;

        .poolTop {
            width: 6.20rem;
            height: 1.56rem;
            background: rgba(255, 255, 255, 0.5);
            border-radius: .20rem;
            margin-top: .40rem;
            display: flex;
            align-items: center;
            justify-content: center;

            p:first-child {
                width: 4.30rem;
                font-size: .22rem;
                font-family: PingFangSC;
                font-weight: 400;
                color: #570D9C;
                line-height: .3rem;
            }

            p:nth-child(2) {
                margin-left: .20rem;
            }
        }

        .poolBottom {
            display: flex;
            align-items: center;
            margin-top: .20rem;
            flex-direction: column;

            .nowRoom {
                width: 6.22rem;
                height: 2rem;
                padding-top: .2rem;
                background: url(../img/welfare/pool1-m.png)top center no-repeat;
                background-size: 100% 100%;
                display: flex;
                align-items: center;
                position: relative;
                justify-content: center;

                .title {
                    width: 2.8rem;
                    height: .36rem;
                    background: #EF6CF8;
                    border-radius: 0rem 0rem .22rem .22rem;
                    font-size: .28rem;
                    text-align: center;
                    font-weight: bold;
                    color: #F5F3FF;
                    line-height: .36rem;
                    position: absolute;
                    top: 0;
                    left: 50%;
                    transform: translate(-50%, 0);
                }

                .headImg {
                    width: .8rem;
                    height: .8rem;
                    background: #C1B8FF;
                    border: .03rem solid #B166F0;
                    border-radius: 50%;
                }

                .infoBox {
                    width: 2.6rem;
                    flex-shrink: 0;
                    margin-top: -0.1rem;
                    border-right: 0.02rem solid #DFD2EA;
                    height: 1rem;

                    p {
                        margin: 0 auto;
                        width: 90%;
                        font-size: .22rem;
                        color: #6B6B6B;
                        line-height: .32rem;
                    }
                }

                .openNum {
                    width: 2.30rem;
                    height: .32rem;
                    background: #EBE1F3;
                    border-radius: .16rem;
                    position: absolute;
                    display: flex;
                    text-align: center;
                    top: 1.35rem;
                    left: 1.3rem;

                    p:first-child {
                        width: 1.2rem;
                        background: #B166F0;
                        border-radius: .16rem;
                        font-size: .2rem;
                        color: #FFFFFF;
                        line-height: .32rem;
                    }

                    p:nth-child(2) {
                        flex: 1;
                        font-size: .24rem;
                        color: #000000;
                        line-height: .32rem;
                    }
                }

                .progressTitle {
                    width: 1.23rem;
                    height: .2rem;
                    background: url(../img/welfare/title-m.png)top center no-repeat;
                    background-size: 100% 100%;
                    position: absolute;
                    top: 0.7rem;
                    right: 0.95rem;
                }

                .progress {
                    display: flex;
                    margin-left: .20rem;

                    span {
                        width: .14rem;
                        height: .4rem;
                        background: #DFD2EA;
                        margin-left: .05rem;

                        &.active {
                            background: #FF8E8E;
                        }
                    }
                }

                .progressNum {
                    font-size: .22rem;
                    text-align: center;
                    color: #6B6B6B;
                    position: absolute;
                    bottom: 0.5rem;
                    right: 0.4rem;
                }
            }

            .awardRecord {
                height: 6.2rem;
                background: url(../img/welfare/pool2-m.png)top center no-repeat;
                background-size: 100% 100%;
                margin-top: .2rem;
                flex-direction: column;

                .awardList {
                    height: 5rem;

                    li {
                        width: 5.9rem;
                        display: flex;
                        background: #EBE1F3;
                        margin: .1rem auto 0;

                        p {
                            flex: 1;
                            text-align: center;
                            font-size: .22rem;
                            color: #5E2A87;
                            line-height: .34rem;
                        }

                        &:first-child {
                            background: unset;

                            p {
                                font-size: .2rem;
                                color: #4A4A4A;
                            }
                        }
                    }

                }
            }
        }
    }

    .welfareToast {
        width: 6.04rem;
        height: 5.04rem;
        background: url(../img/welfare/rule.png)top center no-repeat;
        background-size: 100% 100%;

        .toast {
            width: 100%;
            height: 100%;

            .close {
                top: .35rem !important;
                right: -.11rem !important;
            }

            .ruleBox {
                height: 3.8rem;
                overflow-y: auto;
                margin-top: 0.78rem;

                div {
                    width: 5.25rem;
                    padding: .05rem 0;
                    padding-left: .15rem;
                    background: rgba(255, 255, 255, 0.5);
                    border-radius: .20rem;
                    margin: .10rem auto 0;

                    p:first-child {
                        width: 1.20rem;
                        height: .32rem;
                        background: #B972F1;
                        border-radius: .16rem;
                        font-size: .16rem;
                        text-align: center;
                        font-weight: 600;
                        color: #FFFFFF;
                        line-height: .32rem;
                        flex-shrink: 0;
                    }

                    p:nth-child(2) {
                        font-size: .16rem;
                        width: 95%;
                        color: #676767;
                        line-height: .26rem;
                        padding-left: 2%;
                        margin-top: .05rem;
                    }

                    &:first-child {
                        display: flex;
                    }
                }
            }
        }
    }

    .trenchCeremony {
        width: 6.96rem;
        padding: .40rem 0;
        // height: 11.6rem;
        background: url(../img/welfare/haoli.png)top center no-repeat;
        background-size: 100% 100%;
        margin: .40rem auto 0;

        .giftItem {
            width: 6.10rem;
            padding-right: .10rem;
            height: 1.5rem;
            background: rgba(255, 255, 255, 0.5);
            border-radius: .20rem;
            margin: .10rem auto 0;
            display: flex;
            align-items: center;

            .giftInfo {
                width: 2.60rem;
                height: 1.30rem;
                background: #E3E9F3;
                border-radius: .10rem .65rem .65rem .10rem;
                margin-left: .10rem;
                display: flex;
                align-items: center;
                flex-shrink: 0;

                div {
                    width: .93rem;
                    height: 1.00rem;
                    background: url(../img/welfare/giftBg.png)top center no-repeat;
                    background-size: 100% 100%;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    margin-left: .1rem;

                    img {
                        width: 80%;
                        height: 80%;
                    }
                }

                p {
                    display: flex;
                    flex-direction: column;
                    margin-left: .10rem;

                    span {
                        font-size: .2rem;
                        color: #570D9C;
                        line-height: .32rem;

                        &:first-child {
                            font-size: .22rem;
                            font-weight: 600;
                        }
                    }

                }
            }

            .intro {
                margin-left: .30rem;
                font-size: .2rem;
                color: #6B6B6B;
                line-height: .32rem;

                span {
                    font-size: .28rem;
                    font-weight: 600;
                    font-style: italic;
                    color: #FF6969;
                }

                i {
                    color: #FF6969;
                    text-decoration: underline;
                }
            }
        }

        .giftBottom {
            display: flex;
            margin: .20rem auto 0;
            align-items: center;
            flex-direction: column;

            .infoBox {
                width: 6.2rem;
                height: 1.50rem;
                background: url(../img/welfare/pool1-m.png)top center no-repeat;
                background-size: 100% 100%;
                display: flex;
                align-items: center;
                justify-content: center;

                .headImg {
                    width: .70rem;
                    height: .70rem;
                    background: #C1B8FF;
                    border: .03rem solid #B166F0;
                    border-radius: 50%;
                    position: relative;
                    z-index: 2;
                    left: .2rem;
                }

                .info {
                    width: 3.10rem;
                    height: 1.20rem;
                    background: #EAE7FF;
                    border-radius: .10rem .60rem .60rem .10rem;
                    display: flex;
                    flex-direction: column;
                    align-items: flex-end;
                    justify-content: center;
                    position: relative;
                    left: -.7rem;

                    p {
                        width: 2rem;
                        font-size: .22rem;
                        text-align: left;
                        color: #6B6B6B;
                        line-height: .32rem;
                        // margin-right: .1rem;
                    }
                }

                .medal {
                    width: 2.66rem;
                    height: .53rem;
                    background: url(../img/welfare/medal_n.png)top center no-repeat;
                    background-size: 100% 100%;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    color: #FFFFE4;
                    text-align: center;
                    line-height: .53rem;
                    font-size: .22rem;
                    font-weight: bold;
                    position: relative;
                    right: 0.3rem;

                    &.active {
                        background: url(../img/welfare/medal.png)top center no-repeat;
                        background-size: 100% 100%;
                        color: #fff;
                    }
                }
            }

            .awardRecord {
                width: 6.2rem;
                height: 4.20rem;
                background: url(../img/welfare/pool2-m.png)top center no-repeat;
                background-size: 100% 100%;
                border-radius: .20rem;
                display: flex;
                flex-direction: column;
                align-items: center;
                margin-top: .20rem;

                .title {
                    width: 2.8rem;
                    height: .36rem;
                    background: #EF6CF8;
                    border-radius: 0rem 0rem .22rem .22rem;
                    font-size: .28rem;
                    text-align: center;
                    font-weight: 600;
                    color: #F5F3FF;
                    line-height: .36rem;
                }

                .recordList {
                    margin: .10rem auto .10rem;
                    height: 2.8rem;

                    li {
                        display: flex;
                        width: 5.9rem;
                        background: #EBE1F3;
                        margin: .10rem auto 0;

                        p {
                            flex: 1;
                            font-size: .22rem;
                            text-align: center;
                            color: #5E2A87;
                            line-height: .34rem;

                            &:first-child {
                                width: .7rem;
                                height: .34rem;
                                background: #F67BB7;
                                border-radius: 0rem .17rem .17rem 0rem;
                                font-size: .22rem;
                                text-align: center;
                                color: #FFFFFF;
                                line-height: .34rem;
                                flex: none;
                            }
                        }

                        &:first-child {
                            background: none;

                            p {
                                font-size: .2rem;
                                color: #4A4A4A;

                                &:first-child {
                                    background: none;
                                }
                            }
                        }
                    }

                }
            }
        }
    }

    .ruleBtn {
        width: 1.24rem;
        height: 1.16rem;
        background: url(../img/welfare/ruleBtn-m.png) top center no-repeat;
        background-size: 100% 100%;
        cursor: pointer;
        user-select: none;
        margin-left: .10rem;
        flex-shrink: 0;
    }
}